$(document).ready(function () {
    initSummaryTable();
    refreshTotalData();
    initTable();
    initDateTimeRangePick($('#TimeDay'));
    refreshHistogramData();
});

$.fn.serializeObject = function()
{
   var o = {};
   var a = this.serializeArray();
   $.each(a, function() {
       if (o[this.name]) {
           if (!o[this.name].push) {
               o[this.name] = [o[this.name]];
           }
           o[this.name].push(this.value || '');
       } else {
           o[this.name] = this.value || '';
       }
   });
   return o;
};


$('#theform_commit').click(function (){
      refreshTotalData();
      initTable();
      refreshHistogramData();
});

$("#histogramPrefix").change(function() {
      refreshHistogramData();
});


/*************************汇总方法开始******************************/
var itemStyle = {
    normal: {
        opacity: 0.8,
        shadowBlur: 9,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
};

//设置图表参数
function fillOptions(scatterData,maxOfCostMax,maxOfrequestCountSum){
    var option = {
        backgroundColor: '#404a59',
        grid: {
            x: '5%',
            x2: 200,
            y: '18%',
            y2: '10%'
        },
        tooltip: {
            padding: 10,
            backgroundColor: '#222',
            borderColor: '#777',
            borderWidth: 1,
            formatter: function (obj) {
                var value = obj.value;
                return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                    + value[6]
                    + '</div>'
                    + '执行总时间：' + value[0] + '<br>'
                    + '最大执行时间：' + value[1] + '<br>'
                    + '请求数：' + value[2] + '<br>'
                    + '最高并发：' + value[3] + '<br>'
                    + '非空等待总时长：' + value[4] + '<br>'
                    + '机器人访问次数：' + value[5] + '<br>';
//                     +value[7];
            }
        },
        xAxis: {
            type: 'value',
            name: '执行总时间(ms)',
            nameGap: 16,
            nameTextStyle: {
                color: '#fff',
                fontSize: 14
            },
            splitLine: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#eee'
                }
            }
        },
        yAxis: {
            type: 'value',
            name: '最大时间(ms)',
            nameLocation: 'end',
            nameGap: 20,
            nameTextStyle: {
                color: '#fff',
                fontSize: 16
            },
            axisLine: {
                lineStyle: {
                    color: '#eee'
                }
            },
            splitLine: {
                show: false
            }
        },
        visualMap: [
            {
                left: 'right',
                top: '10%',
                max: maxOfrequestCountSum,
                dimension: 2,
                calculable: true,
                precision: 0.1,
                text: ['圆形大小：请求数'],
                textGap: 30,
                padding: [
                    5,  // 上
                    20, // 右
                    5,  // 下
                    5, // 左
                ],
                textStyle: {
                    color: '#fff'
                },
                inRange: {
                    symbolSize: [10, 50],
                    color: ['#e60000']
                }
            },
            {
                left: 'right',
                bottom: '5%',
                max:maxOfCostMax,
                dimension: 7,
                itemHeight: 120,
                precision: 0.1,
                text: ['耗时'],
                textGap: 30,
                padding: [
                    5,  // 上
                    60, // 右
                    5,  // 下
                    5, // 左
                ],
                textStyle: {
                    color: '#fff'
                },
                inRange: {
                    color: ['#1db667','yellow','red']
                },
                outOfRange: {
                    color: ['#444']
                }
            }
        ],
        series: [
            {
                type: 'scatter',
                itemStyle: itemStyle,
                data: scatterData
            }
        ]
    };
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    //使用刚指定的配置项和数据显示图表。
     myChart.setOption(option);
}


//设置直方图参数
function fillHistogramOptions(histogramData){
    option = {
        backgroundColor: '#404a59',
        color: ['#1db667'],
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            x: '90',
            x2: 200,
            y: '18%',
            y2: '10%'
        },
        xAxis :
            {
                name : histogramData.xAxisTitle,
                nameTextStyle: {
                    color: '#fff',
                    fontSize: 14
                },
                type : 'category',
                data : histogramData.titles,
                axisTick: {
                    alignWithLabel: true
                },
                axisLine: {
                    lineStyle: {
                        color: '#eee'
                    }
                }
            }
        ,
        yAxis :{
            name : histogramData.yAxisTitle,
            nameTextStyle: {
                color: '#fff',
                fontSize: 14
            },
            type : 'value',
            axisLine: {
                lineStyle: {
                    color: '#eee'
                }
            },
            splitLine:{
                show: false
            }
        },
        series : [
            {
                name:histogramData.yAxisTitle,
                type:'bar',
                barWidth: '60%',
                data:histogramData.histogramDatas
            }
        ]
    };
    // 基于准备好的dom，初始化echarts实例
    var histogramChart = echarts.init(document.getElementById('histogramChart'));

    //使用刚指定的配置项和数据显示图表。
     histogramChart.setOption(option);
}


//查询总数据（包括图表）
function refreshTotalData(){
     var chartParams = $('#theform').serializeObject();
     var chartParamsString = JSON.stringify(chartParams);

     var scatterData = [];

     var cosMaxArray = [];    //类别数组（实际用来盛放X轴坐标值）
     var cosSumArray = [];

     // 异步加载数据
     $.ajax({
        type: "post",
        async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url: "/analytics/urlsSummaryData.json",
        data: chartParamsString,
        contentType: 'application/json;charset=utf-8',
        dataType: "json",        //返回数据形式为json
        success: function (data) {

            if(data){
                var chartData = data.chartDate;
                var summaryData = data.summaryData;
                refreshSummary(summaryData);

                var chartList = chartData.chartList;
                var maxOfCostMax = chartData.maxOfCostMax.value;
                var maxOfrequestCountSum = chartData.maxOfrequestCountSum.value;

                //为了让颜色显示更准确，如果最大值太大，会有很多点都不标红，
                //所以最大值不拆过2000，也就是说平均时间大于1000ms的点都会至少变黄
                if(maxOfCostMax > 2000){
                    maxOfCostMax = 2000;
                }


                chartList.forEach(function( val, index ) {
                    var rowData = [];
                    rowData.push(val['sum@uri@cost_sum'].value);
                    rowData.push(val['max@uri@cost_max'].value);
                    rowData.push(val['sum@uri@requestCount'].value);
                    rowData.push(val['max@uri@concurrentMax'].value);
                    rowData.push(val['sum@uri@notEmptyWaitMillis'].value);
                    rowData.push(val['sum@uri@botCount'].value);
                    rowData.push(val['key']);
                    if(val['sum@uri@requestCount'] == undefined || val['sum@uri@requestCount'].value == undefined){
                        rowData.push(0);
                    }else{
                        rowData.push(((val['sum@uri@cost_sum'].value/val['sum@uri@requestCount'].value) * 0.8) + (val['max@uri@cost_max'].value * 0.2));
                    }
                        scatterData.push(rowData);
                });
                fillOptions(scatterData,maxOfCostMax,maxOfrequestCountSum);
            }
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
     });
}

//刷新直方图
function refreshHistogramData(){
     var chartParams = $('#theform').serializeObject();
     var chartParamsString = JSON.stringify(chartParams);

     var scatterData = [];

     // 异步加载数据
    $.ajax({
        type: "post",
        async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url: "/analytics/urlsHistogram.json",
        data: chartParamsString,
        contentType: 'application/json;charset=utf-8',
        dataType: "json",        //返回数据形式为json
        success: function (data) {
            if(data){
                fillHistogramOptions(data);
            }
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    });
}


//刷新汇总数据
function refreshSummary(summaryData){
    summaryrow = {
        requestCount: summaryData[0].value,
        costSum: summaryData[1].value,
        costMax: summaryData[2].value,
        concurrentMax: summaryData[3].value
    };
    $('#summarytable').bootstrapTable('updateRow', { index: 0, row:summaryrow });
}

//初始化汇总数据
function initSummaryTable(summaryData){
    $('#summarytable').bootstrapTable({
		data: [{
		  requestCount: '-',
          costSum: '-',
          costMax: '-',
          concurrentMax: '-'
		}]
	});

}


/*************************汇总方法结束******************************/




/*************************表格方法开始******************************/
//初始化表格
function initTable(){

    $('#thetable').bootstrapTable('destroy');
    $('#thetable').bootstrapTable({
      showExport: true,
      url: '/analytics/urls.json',
      method: 'post',
      pageSize:50,
      queryParams: queryParams,
      responseHandler: responseHandler,
      idField: 'Time',
      classes: 'table table-hover table-condensed',
      striped: true,
      dataShowExport: true,
      sortStable: true,
      pagination: true,
      columns: [
        { field: 'url',  title: '请求url',        sortable: true },
        { field: 'requestCount', title:'请求数', formatter: numt },
        { field: 'costSum', title:'执行总时间',sortable: true},
        { field: 'costMax', title:'最大执行时间' },
        { field: 'concurrentMax', title:'最高并发', formatter: numt }
      ]
    });
}

//表格响应数据处理
function responseHandler(root) {
   $('#theader').html('表格 记录数:'+root.aggregations['group_by@uri@uri'].buckets.length+', 搜索耗时:'+root.took+'ms, 分片:'+root._shards.successful +'/'+ root._shards.total);
   $('#desc').html(root.desc);
   var currentData = [];
   root.aggregations['group_by@uri@uri'].buckets.forEach(function (v) {
     currentData.push({
       url: v['key'],
       requestCount:    v['sum@uri@requestCount'].value,
       concurrentMax:    v['max@uri@concurrentMax'].value,
       costSum:    v['sum@uri@cost_sum'].value,
       costMax:    v['max@uri@cost_max'].value

     });
   });
   return currentData;
}

//表格请求参数处理
function queryParams(params) {
   $('#theform').serializeArray().forEach(function fn(v){
     params[v.name] = v.value;
   });
   return params;
}


/*************************汇总方法结束******************************/





